<template>
  <div class="app-container">
    <div class="other">
      <el-form :inline="true" label-width="68px">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            size="mini"
            @click="handlerSave"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="editor">
      <!-- input绑定的是editor组件传递过来的值，使用get方法接收
            当前组件通过:value和editor组件的value进行绑定，实现数据的传递
       -->
      <md-editor @input="getValue" :value="content" />
    </div>
  </div>
</template>

<script>
import mdEditor from "@/components/Editor";
import { insertSummary, listSummary } from "@/api/system/summary";
export default {
  components: { "md-editor": mdEditor },
  data() {
    return {
      msg: "",
      content: "",
      sId: this.$route.query.id || "", // 总结id
    };
  },
  mounted() {},
  created() {
    this.getList();
  },
  destroyed() {},
  methods: {
    // 拿到editor组件的值
    getValue(val) {
      this.content = val;
    },

    // 保存方法
    handlerSave() {
      const data = {
        sId: this.sId,
        content: this.content,
      };
      return new Promise((resolve, reject) => {
        insertSummary(data)
          .then((res) => {
            this.msgSuccess(res.msg);
            this.content = "";
            this.$router.push({ path: "/summary/list" });
            resolve(res);
          })
          .catch((err) => {
            this.msgError(err.message);
            reject(err);
          });
      });
    },

    // 请求数据
    getList() {
      if (this.sId === "") return;
      const query = {
        sId: this.sId,
      };
      listSummary(query)
        .then((res) => {
          this.content = res.data[0].content;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
</style>